<!--
author: 何其沆(pooky)
desc: Pool - Never Contact
date: 2021-11-12
-->
<template>
  <div class="never-contact">
    <div v-if="hasEditPermission" class="create-button">
      <a-button @click="openModal">
        <template #icon>
          <e-icon type="add" color="#fff" font-size="18px" style="cursor: pointer; margin-left: -2px" />
        </template>
        <span style="margin-left: 10px">Create</span>
      </a-button>
    </div>
    <a-tabs v-model:activeKey="activeKey" type="card">
      <a-tab-pane key="1" tab="Search Check">
        <search-check />
      </a-tab-pane>
      <a-tab-pane key="2" tab="Input Check">
        <input-check />
      </a-tab-pane>
      <a-tab-pane key="3" tab="File Check">
        <file-check />
      </a-tab-pane>
    </a-tabs>
    <a-modal
      v-model:visible="visible"
      wrap-class-name="primary-modal"
      width="888px"
      title="Add Never Contact"
      @cancel="handleCancel">
      <a-form ref="formRef" layout="vertical" :model="formState" :rules="rules">
        <a-form-item ref="email" label="Email" name="email">
          <a-input v-model:value="formState.email" type="email" autocomplete="off"></a-input>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="handleCancel">Cancel</a-button>
        <a-button key="submit" type="primary" @click="handleSave">Save</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script setup>
// 引入方法
import { ref, reactive, toRaw, inject, computed } from 'vue'
import { CREATED_SUCCESSFULLY } from '@/constants/message.js'
// 引入组件
import EIcon from '@/components/EIcon.vue'
import searchCheck from './components/searchCheck.vue'
import inputCheck from './components/inputCheck.vue'
import fileCheck from './components/fileCheck.vue'
import Pool from '@/api/pool.js'
import { useStore } from 'vuex'
const store = useStore()
const hasEditPermission = computed(() => store.getters['user/isSalesSupport'])
const { message } = inject('Feedback')
// 获取form
const formRef = ref()
// 当前tab索引
const activeKey = ref('1')
// email新增内容
const formState = reactive({
  email: undefined
})
// 模态框是否显示
const visible = ref(false)
// 规则校验
const rules = {
  email: [
    {
      required: true,
      // whitespace: true,
      message: 'Please input email.'
    },
    {
      // eslint-disable-next-line prefer-regex-literals
      // pattern: new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/),
      type: 'email',
      message: 'Wrong E-mail format.',
      trigger: 'blur'
    }
  ]
}
/**
 * 打开模态框
 */
const openModal = () => {
  visible.value = true
}
/**
 * 取消模态框
 */
const handleCancel = () => {
  formRef.value.resetFields()
  visible.value = false
}
/**
 * 提交数据
 */
const handleSave = () => {
  formRef.value
    .validate()
    .then(() => {
      const email = toRaw(formState.email)
      Pool.createAdminNeverContact({
        email
      })
        .then(res => {
          if (res.code === 2000) {
            formRef.value.resetFields()
            visible.value = false
          }
        })
        .then(() => {
          message.success(CREATED_SUCCESSFULLY)
        })
    })
    .catch(() => {})
}
</script>
<style scoped lang="less">
@import '@/assets/style/reset_tabs';

.never-contact {
  position: relative;
  .create-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    .ant-btn {
      width: 94px;
      height: 32px;
      background-color: @primary-color;
      border-radius: 2px;
      color: @white;
      font-size: 14px;
    }
  }
}
</style>
<route lang="yaml">
name: Never Contact Management
path: /pool-m/never-contact
meta:
  title: 'Never Contact'
  sort: 1
  roles: isPrimaryCSO, isBranchCSO, isBUM, isSalesSupport
</route>
